<template>
    <div>
        {{users.length}}人
        <!-- {{users.filter(t=>t.age>=18).length}}成人  -->
        <!-- {{audient()}}成人 
        {{unaudient()}}未成年 -->
        {{audient}}成人 
        {{unaudient()}}未成年
        <!-- 第二次调用audient计算属性 调用的结果上一次计算属性运行的结果缓存 性能比函数方式更好 -->
        <h3>统计{{audient}}成年人 {{unaudient()}}未满18岁</h3>
        <!-- 能400整除  -->
        {{year}}<button @click="year++">add year</button>  {{fyear}}
        <!-- 搜索提示 -->
        <!-- http://47.115.51.185:8081/search/suggest -->
        <div>
            <input placeholder="请输入关键词" v-model="keywords"/>{{keywords}}
        </div>
        <ul>
            <li v-for="s in suggustArray" :key="s.id">{{s.name}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                users:[
                    {id:1,name:"王鸿",age:18},
                    {id:2,name:"王宝钏",age:10},
                    {id:3,name:"王栋",age:19}
                ],
                year:2022,
                keywords:"",
                suggustArray:[]//搜索提示结果.
            }
        },
        methods:{
            // audient(){
            //     console.log("audient===>")
            //     return this.users.filter(t=>t.age>=18).length
            // },
            unaudient(){
                return this.users.filter(t=>t.age<18).length;
            }
        },
        computed:{
            audient(){//当一个数据依赖于另外一个数据的时候，用computed生成一个新的数据
                console.log("audient===> 计算属性");//如果依赖发生变化会在运行一次.
                return this.users.filter(t=>t.age>=18).length
            },
            fyear2:{
                get(){
                    //getter函数它必须返回一个结果.而且里面不能用副作用操作.
                    //副作用就是 dom操作 或 ajax异步操作 定时器这些操作. 只能返回一个同步的结果.
                    //如果有副作用操作 用watch 侦听器比如执行ajax
                },
                set(){

                }
            },
            fyear(){
                //默认是getter函数
                return this.year%4==0&&this.year%100!=0?"润年":"平年"
            }
        },
        watch:{//侦听器 侦听data 或 计算属性发生变化的时候执行代码.
            fyear(newValue,oldValue){//比如搜索提示
                console.log("侦听 fyear是否有变化 ",newValue,'oldValue===>',oldValue)
            },
            keywords(newValue){//watch 用来侦听数据变化 一般用在耗时或异步任务
                // console.log("newValue===>",newValue)
                //H5里面新增一个fetch()函数 支持Promise是一种异步代码书写风格.
                //fetch的结果 需要用 response.json()函数转化为json数据
                fetch("http://47.115.51.185:8081/search/suggest?keywords="+newValue)
                .then(repsonse=>repsonse.json())
                .then(re=>{
                    this.suggustArray=re.result.songs;
                    console.log("结果==>",re);
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>